<template>
  <div id="userinfo" v-loading="loading">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin/home/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 个人中心 -->
    <el-form class="form" :model="form" label-width="80px" :inline="false" size="normal">
      <el-form-item label="头像">
        <el-upload class="avatar-uploader" name="file" :headers="hander" action="http://localhost:8675/admin/upload/avatar" :show-file-list="false" :on-success="handleAvatarSuccess">
          <img v-if="imageUrl" :src="'http://localhost:8675/file/' + imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="昵称">
        <el-input placeholder="请输入昵称" v-model="form.nickName" :disabled="input.nickName">
          <i slot="suffix" class="el-input__icon el-icon-edit" @click="clickEditIcon('nickName')"></i>
        </el-input>
      </el-form-item>

      <el-form-item label="真实姓名">
        <el-input placeholder="请输入用户名" v-model="form.realName" :disabled="input.realName">
          <i slot="suffix" class="el-input__icon el-icon-edit" @click="clickEditIcon('realName')"></i>
        </el-input>
      </el-form-item>

      <el-form-item label="学号">
        <el-input placeholder="请输入用户名" v-model="form.unique" :disabled="input.unique">
          <i slot="suffix" class="el-input__icon el-icon-edit" @click="clickEditIcon('unique')"></i>
        </el-input>
      </el-form-item>

      <el-form-item label="qq号码">
        <el-input placeholder="请输入用户名" v-model="form.qq" :disabled="input.qq">
          <i slot="suffix" class="el-input__icon el-icon-edit" @click="clickEditIcon('qq')"></i>
        </el-input>
      </el-form-item>

      <el-form-item label="手机号码">
        <el-input placeholder="请输入用户名" v-model="form.phone" :disabled="input.phone">
          <i slot="suffix" class="el-input__icon el-icon-edit" @click="clickEditIcon('phone')"></i>
        </el-input>
      </el-form-item>

      <el-form-item label="性别">
        <el-radio :disabled="input.sex" v-model="form.sex" :label="1">男生</el-radio>
        <el-radio :disabled="input.sex" v-model="form.sex" :label="2">女生</el-radio>
        <i class="el-icon-edit" @click="clickEditIcon('sex')"></i>
      </el-form-item>

      <el-form-item v-show="isEdit">
        <el-button type="primary" @click="doEdit">修改</el-button>
        <el-button @click="reset">取消</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import Cooike from "js-cookie";
import { getUserInfoApi, adminEditUserApi } from "@/api/admin.js";
import { mapMutations } from "vuex";
export default {
  inject: ["reload"],
  data() {
    return {
      form: {
        id: null,
        avatar: null,
        nickName: null,
        sex: null,
        qq: null,
        phone: null,
        unique: null,
        realName: null,
      },
      imageUrl: null,
      hander: {},
      user: {
        id: null,
        avatar: null,
        nickName: null,
        sex: null,
        qq: null,
        phone: null,
        unique: null,
        realName: null,
      },
      input: {
        nickName: true,
        sex: true,
        qq: true,
        phone: true,
        unique: true,
        realName: true,
      },
      isEdit: false,
      loading: false,
    };
  },
  methods: {
    ...mapMutations(["setLocalUser"]),
    //文件上传成功后的钩子函数
    handleAvatarSuccess(e) {
      this.imageUrl = e.data.file;
      this.$message.success("更换头像成功");
      this.reload();
    },
    //获取请求偷
    getHander() {
      this.hander = { Authorization: "Bearer: " + Cooike.get("token") };
    },
    //获取用户信息
    getUserInfo() {
      getUserInfoApi().then((res) => {
        const result = res.data;
        if ((result.status = 200)) {
          this.user = result.data;
          this.imageUrl = this.user.avatar;
          Object.assign(this.form, this.user);
        }
      });
    },
    //点击编辑图标
    clickEditIcon(e) {
      this.input[e] = !this.input[e];
      for (let key in this.input) {
        if (!this.input[key]) {
          this.isEdit = true;
          break;
        }
        this.isEdit = false;
      }
    },
    //取消
    reset() {
      Object.assign(this.form, this.user);
      for (let key in this.input) {
        this.input[key] = true;
        this.isEdit = false;
      }
    },
    //执行修改操作
    doEdit() {
      this.$confirm("确认要修改吗？", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      }).then(() => {
        const form = {
          realName: this.form.realName,
          nickName: this.form.nickName,
          qq: this.form.qq,
          phone: this.form.phone,
          unique: this.form.unique,
          sex: this.form.sex,
          id: this.form.id,
        };
        adminEditUserApi(form)
          .then((res) => {
            this.loading = true;
            const result = res.data;
            if (result.status == 200) {
              this.$message.success("修改成功");
            } else {
              this.$message.error(result.msg);
            }
          })
          .finally(() => {
            this.loading = false;
            this.reload();
            if (form.phone != null) {
            }
          });
      });
    },
  },

  created() {
    this.getHander();
    this.getUserInfo();
  },
};
</script>

<style scoped>
.form {
  margin-top: 50px;
}
.form .el-input {
  width: 300px;
}
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.form .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-icon-edit {
  font-size: 20px;
}
.el-icon-edit:hover {
  cursor: pointer;
}
</style>